<template>
  <div>
    {{ count }} {{ doubleCount }}
  </div>
  <div>
    {{ size }} {{ doubleSize }}
  </div>
  <button @click="add">add</button>
  <button @click="minus">minus</button>
  <!-- <button @click="add, minus">click</button> -->
</template>

<script setup>
  import { ref, computed, reactive } from 'vue'
  const count = ref(0)
  const size = ref(100)
  const doubleCount = computed(() => {
    return count.value * 2
  })
  const doubleSize = computed(() => {
    return size.value * 2
  })
  const add = () => {
    count.value++
  }
  const minus = () => {
    size.value--
  }
</script>

<style lang="less" scoped>

</style>
